<template>
  <div>
    <h3>房号列表</h3>
    <div>
      房号名称:<input type="text" v-model="info.houseNoName" /> 房型:
      <select v-model="info.houseTypeId">
        <option value="">请选择</option>
        <option :value="item.Id" v-for="item in data2.list">
          {{ item.HouseTypeName }}
        </option>
      </select>
      门店
      <select v-model="info.shopId">
        <option value="">请选择</option>
        <option :value="item.Id" v-for="item in data1.list">
          {{ item.ShopName }}
        </option>
      </select>
      房态:
      <select v-model="info.houseState">
        <option value="">请选择</option>
        <option :value="1">空闲</option>
        <option :value="2">已预约</option>
        <option :value="3">已入住</option>
      </select>
      <input type="button" value="查询" class="btn btn-primary" @click="show" />
      <input
        type="button"
        value="重置"
        class="btn btn-primary"
        @click="reset"
      />
      <input type="button" value="下载" class="btn btn-info" @click="fn" />
      <input type="file" @change="fn1" />
      <input type="button" value="导入" class="btn btn-info" @click="fn3" />
    </div>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>Id</td>
          <td>房号名称</td>
          <td>房型名称</td>
          <td>房型图片</td>
          <td>房型价格</td>
          <td>房型面积</td>
          <td>门店名称</td>
          <td>房态</td>
          <td>创建时间</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in data.list">
          <td>{{ item.Id }}</td>
          <td>{{ item.HouseNoName }}</td>
          <td>{{ item.HouseTypeName }}</td>
          <td><img :src="item.Photo" width="100" height="100" /></td>
          <td style="color: red">￥{{ item.Money.toFixed(2) }}</td>
          <td>{{ item.Area }}</td>
          <td>{{ item.ShopName }}</td>
          <td>
            <span v-if="item.HouseState == 1">空闲</span>
            <span v-if="item.HouseState == 2">已预约</span>
            <span v-if="item.HouseState == 3">已入住</span>
          </td>
          <!-- <td>{{ moment(item.CreateTime).format('YYYY-MM-DD') }}</td> -->
          <!-- <td>{{ moment(item.CreateTime).format('YYYY-MM-DD hh:mm:ss') }}</td> -->
          <td>{{ moment(item.CreateTime).format('YYYY-MM-DD HH:mm:ss') }}</td>
          <td>
            <input type="button" value="修改" class="btn btn-primary" />
            <input type="button" value="删除" class="btn btn-danger" />
            <input type="button" value="详情" class="btn btn-info" />
            <input type="button" value="单个状态" class="btn btn-primary" />
          </td>
        </tr>
      </tbody>
    </table>
    {{ data.totalCount }}
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
//向后端传递的数据
let info: any = reactive({
  pageIndex: 1, //页码
  pageSize: 2, //页容量
  houseNoName: '',
  shopId: '',
  houseTypeId: '',
  houseState: '',
});

//声明一个变量接受后端返回的数据
let data: any = reactive({
  list: [],
  totalCount: 0,
  totalPage: 0,
});

//声明一个变量存储获取列表向后端传递的数据
let info1: any = reactive({
  pageIndex: 1, //页码
  pageSize: 100, //页容量
  shopName: '',
  shopAddress: '',
});

//声明一个变量接受后端返回的数据
let data1: any = reactive({
  list: [],
  totalCount: 0, //总条数
  totalPage: 0, //总页数
});

//声明一个变量存储获取列表及查询条件的数据
let info2: any = reactive({
  pageIndex: 1,
  pageSize: 100,
  houseTypeName: '',
  area1: '',
  area2: '',
});

//接受后端返回列表数据
let data2: any = reactive({
  totalCount: 0,
  totalPage: 0,
  list: [],
});
//存储选择的Excel文件
let obj = ref();

onMounted(() => {
  getHouseNoList();
  getShopList();
  getList();
});

//导入
const fn1 = (e: any) => {
  //获取文件
  obj.value = e.target.files[0];
};

const fn3 = () => {
  //1.将获取的文件转成FormData格式
  let f = new FormData();
  f.append('file', obj.value);
  //2.发送网络请求
  axios({
    url: '/api/Houses/ImportHouseNo',
    method: 'post',
    data: f,
  })
    .then((res) => {
      console.log(res);
      if (res.data > 0) {
        alert('导入成功');
        getHouseNoList();
      } else {
        alert('导入失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

const fn = () => {
  //location.href = 'http://localhost:5048/api/Houses/Export';
  location.href = `http://localhost:5048/api/Houses/Export?pageIndex=${info.pageIndex}&pageSize=${info.pageSize}&houseNoName=${info.houseNoName}&shopId=${info.shopId}&houseTypeId=${info.houseTypeId}&houseState=${info.houseState}`;
};

const reset = () => {
  info.houseNoName = '';
  info.shopId = '';
  info.houseTypeId = '';
  info.houseState = '';
};
const show = () => {
  info.pageIndex = 1;
  getHouseNoList();
};

//获取房号列表
const getHouseNoList = () => {
  axios({
    url: '/api/Houses/GetHouseNoList',
    method: 'get',
    params: info,
  })
    .then((res) => {
      console.log(res);
      Object.assign(data, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};

//1.读取门店和房型列表

//获取门店列
const getShopList = () => {
  axios({
    url: '/api/Shops/GetShopList',
    method: 'get',
    params: info1,
  })
    .then((res) => {
      console.log(res);
      //第二种赋值
      Object.assign(data1, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};

//获取房型列表
const getList = () => {
  axios({
    url: '/api/Houses/GetHouseTypeList',
    method: 'get',
    params: info2,
  })
    .then((res) => {
      console.log(res);
      Object.assign(data2, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
